<!-- 页面结构 -->
<template>
  {{ fontSize }}
  <div :style="{ 'font-size': fontSize + 'px' }">
    <!-- num:{{ num }} -->
    count:{{ count }}
    <button @click="count++">count++</button>
    <button @click="childAddFont">fontSize++</button>
    <button @click="childReduceFont">fontSize--</button>
    <button @click="fontSize--">fontSize--</button>
  </div>
</template>
<!-- js -->
<script setup>
import { ref } from 'vue';
const count = ref(0);
const fontSize = ref(20);
const props = defineProps(['num']);
count.value = props.num;

function childAddFont () {
  console.log('😊yb ~ childAddFont - childAddFont:');
  fontSize.value++;
}

function childReduceFont() {
  console.log('😊yb ~ childReduceFont - fontSize--');
  if (fontSize.value > 0) { // 确保字体大小不会小于0
    fontSize.value--;
  }
}
// 暴露方法给父组件
defineExpose({ childAddFont,childReduceFont});
</script>
<!-- 样式 -->
<!-- scoped是为了当前组件的样式不要影响其他组件 -->
<style scoped>
</style>